<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"               
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns="http://www.w3.org/1999/xhtml">
    <h:form>

        <p:panel header="Upcoming Events"  >

            <p:scrollPanel style="height: 300px">
                <p:dataGrid var="event" value="#{eventControl.upcomingEventList}" columns="1">
                    <p:column>
                        <p:panel header ="#{event.title}" >
                            <h:panelGrid  columns="2">
                                <h:outputLabel value="Start at:" class="color_blue"></h:outputLabel>
                                <h:outputLabel value="#{event.startDate}"  class="bold"  >
                                    <f:convertDateTime timeZone="GMT+7" type="date" pattern="MM/dd/yyyy" />
                                </h:outputLabel>
                                <h:outputLabel value="End at:" class="color_blue" ></h:outputLabel>
                                <h:outputLabel value="#{event.endDate}" >
                                    <f:convertDateTime timeZone="GMT+7" pattern="MM/dd/yyyy"  />
                                </h:outputLabel>
                                <h:outputLabel value="Register at:" class="color_blue_red"></h:outputLabel>
                                <h:outputLabel value="#{event.startRegDate}"  class="bold"  >
                                    <f:convertDateTime pattern="MM/dd/yyyy" timeZone="GMT+7" />
                                </h:outputLabel>
                                <h:outputLabel value="Due to:" class="color_blue_red"></h:outputLabel>
                                <h:outputLabel value="#{event.endRegDate}"  class="bold"  >
                                    <f:convertDateTime pattern="MM/dd/yyyy" timeZone="GMT+7" />
                                </h:outputLabel>
                            </h:panelGrid>
                            <h:panelGrid columns="1">
                                <h:outputLabel value="#{eventControl.shortEventDescription(event)}"  ></h:outputLabel>
                                <p:commandLink   actionListener="#{eventControl.redirectToEvent(eventControl.selectedevent)}"  value="Details" style=" font-weight: bold; text-decoration: none; float: right;padding-right: 0px; color:#b1f100 ; background-color:#2e16b1" >
                                    <f:setPropertyActionListener value="#{event}" target="#{eventControl.selectedevent}" />
                                </p:commandLink>
                            </h:panelGrid>
                        </p:panel>
                    </p:column>
                </p:dataGrid>
            </p:scrollPanel>

        </p:panel>

    </h:form>

</ui:composition>